/* /src/css/tailwindcss.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer {
  :root {
    --background: #fff; /* 打开postDetail之后，最后一层的背景色 */
    --layoutGround: #fff;
    --boxGround: #ffffff;
    --foreground: #09090b;
    --textColor: #1d1d1f;
    --textWeight: 400;
    --border: #e3e3e7;
    --border-button: rgb(207, 217, 222);

    /* surface */
    --surface-0: #ffffff;
    --surface-1: #ececec;
    --surface-2: #f0f1f3;
    --surface-3: #f8f8f8;

    /* fill */
    --fill-0: #ffffff;
    --fill-1: #f4f5f5;
    --fill-2: #f2f2f2;
    --fill-3: #e5e5e5; /* hover背景色 */
    --fill-disable: #8b8b8b;
    --fill-b: #000000;
    --fill-b-1: #272727;
    --fill-b-hover: #272727;
    --fill-hover: #e5e5e5;
    /* text */
    --text-0: #ffffff;
    --text-1: #0f1419;
    --text-2: #3f3f46;
    --text-3: #7a7a83;
    --text-4: #9499a0;
    --text-b: #000000;

    /* line */
    --line-0: #ffffff;
    --line-1: #e3e3e7;
    --line-2: rgb(207, 217, 222); /* button outline */
    --line-b: #000000;
  }

  .dark {
    --background: #09090b;
    --layoutGround: #313338;
    --boxGround: #393c41;
    --foreground: #f9f9f9;
    --textColor: #eef1f3;
    --textWeight: 500;
    --border: #27272a;
    --border-button: rgb(207, 217, 222);

    /* surface */
    --surface-0: #111111;
    --surface-1: #27272a;
    --surface-2: #313338;
    --surface-3: #393c41;

    /* fill */
    --fill-0: #111111;
    --fill-1: #222222;
    --fill-2: #313338;
    --fill-3: #393c41;
    --fill-b: #ffffff;
    --fill-b-1: #ffffff;
    --fill-b-hover: #ffffff;
    --fill-hover: #141416;

    --text-0: #1d1d1f;
    --text-1: #eef1f3;
    --text-2: #eef1f3;
    --text-3: #eef1f3;
    --text-4: #eef1f3;
    --text-b: #eef1f3;

    /* line */
    --line-0: #000000;
    --line-1: rgba(255, 255, 255, 0.2);
    --line-b: #eef1f3;
    --border-button: rgb(207, 217, 222);
  }

  .green {
    --background: #fff; /* 打开postDetail之后，最后一层的背景色 */
    --layoutGround: #fff;
    --boxGround: #ffffff;
    --foreground: #09090b;
    --textColor: #1d1d1f;
    --textWeight: 400;
    --border: #e3e3e7;
    --border-button: rgb(207, 217, 222);

    /* surface */
    --surface-0: #ffffff;
    --surface-1: #ececec;
    --surface-2: #f0f1f3;
    --surface-3: #f8f8f8;

    /* fill */
    --fill-0: #ffffff;
    --fill-1: #f4f5f5;
    --fill-2: #f2f2f2;
    --fill-3: #e5e5e5; /* hover背景色 */
    --fill-disable: #8b8b8b;
    --fill-b: green;
    --fill-b-1: #272727;
    --fill-b-hover: #272727;
    --fill-hover: #e5e5e5;
    /* text */
    --text-0: #ffffff;
    --text-1: #0f1419;
    --text-2: #3f3f46;
    --text-3: #7a7a83;
    --text-4: #9499a0;
    --text-b: #000000;

    /* line */
    --line-0: #ffffff;
    --line-1: #e3e3e7;
    --line-2: rgb(207, 217, 222); /* button outline */
    --line-b: #000000;
  }
}

@layer base {
  * {
    @apply box-border border-[--border];
  }

  body {
    @apply bg-[--background] text-[--textColor] font-[--textWeight];
  }
  /* 恢复h1, h2, h3, h4, h5, h6标签的默认样式 */

  h1 {
    @apply text-2xl font-bold;
  }
  h2 {
    @apply text-xl font-bold;
  }
  h3 {
    @apply text-lg font-bold;
  }
  h4 {
    @apply text-base font-bold;
  }
  h5 {
    @apply text-sm font-bold;
  }
  h6 {
    @apply text-xs font-bold;
  }
}

@layer components {
  .tborder {
    @apply border-solid border-1 border-red-600;
  }
  .flex-cc {
    @apply flex  items-center justify-center;
  }
  .flex-cb {
    @apply flex items-center justify-between;
  }

  .split-line-r {
    @apply border-solid border-r-[0.5px] border-[--line-1];
  }
  .split-line-b {
    @apply border-solid border-b-[0.5px] border-[--line-1];
  }

  .lf-btn-box {
    @apply flex rounded-full bg-[#e7eaec] w-fit px-2 py-1 gap-1 text-sm cursor-pointer;
  }
}
